<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
	<div v-if="pageflag" class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
		<component :is="components" :data="list" :class-option="defaultOption">
			<ul class="left_boottom">
				<li class="left_boottom_item" v-for="(item, i) in list" :key="i">
					<!-- <span class="orderNum doudong">{{ i + 1 }}</span> -->
					<div class="inner_right">
						<div class="dibu"></div>
						<div class="info">
							{{ item.name }}
						</div>
						<div class="info">
							{{ item.content }}
						</div>
						<div class="info">
							{{ item.value }}
						</div>
						<div class="info">
							{{ item.unit }}
						</div>
					</div>
				</li>
			</ul>
		</component>
	</div>

	<Reacquire v-else @onclick="getData" style="line-height: 200px" />
</template>

<script>
	import {
		currentGET
	} from "api";
	import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
	import Kong from "../../components/kong.vue";
	export default {
		components: {
			vueSeamlessScroll,
			Kong
		},
		data() {
			return {
				list: [
				// 	{
				// 	name: "COD",
				// 	content: "数值超标",
				// 	value: "25",
				// 	unit: "mg/L"
				// },{
				// 	name: "TN",
				// 	content: "标准值超标",
				// 	value: "10",
				// 	unit: "mg/L"
				// },
				],
				pageflag: true,
				components: vueSeamlessScroll,
				defaultOption: {
					...this.$store.state.setting.defaultOption,
					singleHeight: 200,
					limitMoveNum: 5,
					step: 0,
				},
			};
		},
		computed: {
			sbtxSwiperFlag() {
				let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
				if (sbtxSwiper) {
					this.components = vueSeamlessScroll;
				} else {
					this.components = Kong;
				}
				return sbtxSwiper;
			},
		},
		created() {

		},

		mounted() {
			this.getData();
		},
		methods: {
			addressHandle(item) {
				let name = item.provinceName;
				if (item.cityName) {
					name += "/" + item.cityName;
					if (item.countyName) {
						name += "/" + item.countyName;
					}
				}
				return name;
			},
			getData() {
				this.pageflag = true;
				// this.pageflag =false
				currentGET("big3", {
					limitNum: 20
				}).then((res) => {
					console.log("设备提醒", res);
					if (res.success) {
						this.countUserNumData = res.data;
						// this.list = res.data.list;
						let timer = setTimeout(() => {
							clearTimeout(timer);
							this.defaultOption.step =
								this.$store.state.setting.defaultOption.step;
						}, this.$store.state.setting.defaultOption.waitTime);
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
		},
	};
</script>
<style lang='scss' scoped>
	.left_boottom_wrap {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.doudong {
		//  vertical-align:middle;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.overflow-y-auto {
		overflow-y: auto;
	}

	.left_boottom {
		width: 100%;
		height: 100%;

		.left_boottom_item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12px 0;
			font-size: 14px;
			/* margin: 10px 0; */

			.orderNum {
				margin: 0 16px 0 -20px;
			}

			.info {
				flex: 1;
				/* margin-right: 10px; */
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;

				.labels {
					flex-shrink: 0;
					font-size: 12px;
					color: rgba(255, 255, 255, 0.6);
				}

				.zhuyao {
					color: $primary-color;
					font-size: 15px;
				}

				.ciyao {
					color: rgba(255, 255, 255, 0.8);
				}

				.warning {
					color: #e6a23c;
					font-size: 15px;
				}
			}

			.inner_right {
				position: relative;
				height: 100%;
				width: 100%;
				flex-shrink: 0;
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-wrap: wrap;

				.dibu {
					position: absolute;
					height: 2px;
					width: 100%;
					background-image: url("../../assets/img/zuo_xuxian.png");
					bottom: -15px;
					left: -2%;
					background-size: cover;
				}

				.addresswrap {
					width: 100%;
					display: flex;
					margin-top: 8px;
				}
			}

			.wangguan {
				color: #1890ff;
				font-weight: 900;
				font-size: 15px;
				width: 80px;
				flex-shrink: 0;
			}


			.time {
				font-size: 12px;
				// color: rgba(211, 210, 210,.8);
				color: #fff;
			}

			.address {
				font-size: 12px;
				cursor: pointer;
				// @include text-overflow(1);
			}

			.types {
				width: 30px;
				flex-shrink: 0;
			}

			.typeRed {
				color: #fc1a1a;
			}

			.typeGreen {
				color: #29fc29;
			}
		}
	}
</style>